import React from 'react';
import { Input, Menu, Avatar,  Icon, Button  } from 'antd';
import { NavLink } from 'react-router-dom';
import './index.less';
// import PropTypes from "prop-types";
const { SubMenu } = Menu;


class Header extends React.Component {
  constructor(props){
    super(props);
    this.state={
      keyword: ''
    }
  }

  getInputValue(event){
    this.setState({
      keyword: event.target.value
    })
  }
  render() {
    return (
      <div className="container">
        <div className="topbar-container">
          <div className="logo">
            <NavLink to="/">
              <span>小帮厨</span>
            </NavLink>
          </div>
          <Input
            style={{ width: '22%' }}
            placeholder="搜索菜谱、食材"
            onChange={event => this.getInputValue(event)}
            allowClear
            size="large"
          />
          <NavLink to={{ pathname: `/home/${this.state.keyword}`, state: {keyword:this.state.keyword} }} >
            <Button
              type="primary"
              icon="search"
              size="large"
            >
              搜菜谱
            </Button>
          </NavLink>
           <Menu  mode="horizontal">
              <SubMenu
                title={
                  <span className="submenu-title-wrapper">
                    <Icon type="setting" />
                    菜单分类
                  </span>
                }
              >
                <Menu.ItemGroup title="常见主题"/>
                <Menu.ItemGroup title="常见食材"/>
                <Menu.ItemGroup title="时令食材"/>
              </SubMenu>
              <Menu.Item key="alipay">
                <NavLink to="/topic">话题</NavLink>
              </Menu.Item>
              <Menu.Item key="mail"><NavLink to="/menu">菜单</NavLink></Menu.Item>
              <Menu.Item key="app"><NavLink to="/mine">我的主页</NavLink></Menu.Item>
          </Menu>
          <div className="avatar">
           <Avatar style={{ backgroundColor: '#1890ff' }} icon="user" />
          </div>
        </div>
      </div>
    );
  }
}

export default Header;